6 红<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="params" size="mini" label-width="130px">

        <el-form-item label="客户编号：">
          <el-input v-model="params.customerNumber"></el-input>
<!--          <el-autocomplete-->
<!--                  clearable-->
<!--                  class="inline-input"-->
<!--                  value-key="customerName"-->
<!--                  :fetch-suggestions="querySearch"-->
<!--                  v-model="params.customerName"-->
<!--                  placeholder="请输入内容"-->
<!--                  @select="handleSelectCustomerName"-->
<!--                  :trigger-on-focus="false"-->
<!--          ></el-autocomplete>-->
        </el-form-item>
        <el-form-item label="采购评级：">
          <el-select v-model.number="params.customerLabel" class="input-width" style="width:195px" placeholder="请选择" clearable >
            <el-option :value="-1" label="无" :key="-1"></el-option>
            <el-option value="A类" label="A类" key="A类"></el-option>
            <el-option value="B类" label="B类" key="B类"></el-option>
            <el-option value="C类" label="C类" key="C类"></el-option>
            <el-option value="D类" label="D类" key="D类"></el-option>
            <el-option value="E类" label="E类" key="E类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
                  @click="handleSearchList()"
                  type="primary">
            查询
          </el-button>
          <el-button
                  :loading="btnloading"
                  @click="downloadExcel()"
                  type="primary">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--数据列表-->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="list"
        border
        style="width: 100%; margin-top: 20px">

        <el-table-column
                label="客户编号"
                align="center">
          <template slot-scope="scope">
            <div>{{scope.row.customerNumber }}</div>
            <!--是否有权限-->
            <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
          </template>
        </el-table-column>
        <el-table-column
                prop="kingNumber"
                label="客户代码"
                align="center">
        </el-table-column>
        <el-table-column
                prop="customerLabel"
                label="采购评级">
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="params.pageNum"
        :page-size="params.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

  </div>
</template>

<script>
    import { getCustomerList,getOrderUsersList,getCustomerOption} from '@/api/partner'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    export default {
        name: "monthAnalysis",
        data(){
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                params:{
                  pageNum:1,
                  pageSize:10,
                  customerName:null,
                  customerLabel:null,
                  customerNumber:'',
                },
                list:[],
                count:0,
                loading:false,
                userOptionList:[],
                customerList:[],
                loading2:false,
                btnloading:false,
                exData:{},
            }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),


        },
        created() {
          this.getListData();
          this.getUserOptionList();
        },
        filters: {
            formatTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd')
            },
        },
        methods:{
          //下载excle
          downloadExcel(){
            let params = JSON.parse(JSON.stringify(this.params));
            params.isExport = 1;
            this.btnloading = true;
            getCustomerList(params).then((res)=>{
              this.btnloading = false;
              require.ensure([], () => {
                const { export_json_to_excel } = require('sheet/Export2Excel');
                const tHeader = res.title;
                const filterVal = res.columns;
                const list = res.list;
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, res.fileName);
              })
            }).catch(()=>{
              this.btnloading = false;
            })
          },

          //下载表格数据格式化
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
          },
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },

          //客户名称输入匹配
          querySearch(queryString, cb){
            let data = {};
            data.keywords = queryString;
            getCustomerOption(data).then((res)=>{
              cb(res);
            })
          },

          //选择客户名称
          handleSelectCustomerName(item){
            this.params.customerName = item.customerName
          },

          handleSearchList(){
                this.params.pageNum = 1;
                this.getListData();
            },

            handleSizeChange(val){
                this.params.pageNum = 1;
                this.params.pageSize = val;
                this.getListData();
            },
            handleCurrentChange(val){
                this.params.pageNum = val;
                this.getListData();
            },

            getListData(){
              this.loading = true;
              getCustomerList(this.params).then((res)=>{
                this.list = res.list;
                this.count = res.count;
                this.loading = false;
              }).catch(()=>{
                this.loading = false;
              })
            },

        },
    }
</script>

<style scoped lang="scss">
  .avatar-uploader{
    margin-bottom:10px;
    display: inline-block;
    width:80px;
    height:80px;
    border:1px solid #DCDFE6;
    text-align: center;
    line-height: 80px;
  }
</style>
